import { Cascader, Picker, Space } from 'antd-mobile'
import { FC, PropsWithChildren, useEffect, useState } from 'react'
import type { CascaderOption } from 'antd-mobile/es/components/cascader'
import { DownOutline, CloseCircleFill } from 'antd-mobile-icons'

interface CustomCascaderProps extends PropsWithChildren {
    request?: any
    valueListReq?: any
    value?: any
    onChange?: any
    title?: any
    customColumns?: any
    customChildRender?: any
}

const CustomCascader: FC<CustomCascaderProps> = ({
    request,
    value,
    onChange,
    title,
    customColumns,
    customChildRender,
    valueListReq,
}) => {
    const [visible, setVisible] = useState(false)
    const [options, setOptions] = useState<CascaderOption[]>([])
    const [loading, setLoading] = useState(true)

    const onRequest = async (params: any) => {
        try {
            const res = await request(params)

            setOptions(res)
            setLoading(false)
        } catch (e) {
            setLoading(false)
        }
    }

    const getValueList = async (params: any) => {
        try {
            const res = await valueListReq(params)
            onChange(res)
        } catch (e) {
        }
    }

    const onClear = (e: any) => {
        e.stopPropagation()
        onChange?.([])
    }

    useEffect(() => {
        if (value) {
            let id = value
            if (Array.isArray(value)) {
                if (value?.length === 1) {
                    id = value[0]
                } else {
                    id = null
                }
            }
            if (id) {
                getValueList({id})
            }
        }
        if (request) {
            onRequest({})
        } else {
            setLoading(false)
            setOptions(customColumns || [])
        }
    }, [])

    const getValue = () => {
        if (value && !Array.isArray(value)) {
            return [value]
        }
        value = value ? value : []
        return value
    }

    return <>
        <Cascader
            options={options}
            visible={visible}
            loading={loading}
            onClose={() => {
                setVisible(false)
            }}
            title={title}
            value={getValue()}
            onConfirm={onChange}
        // onSelect={(val, extend) => {
        //     console.log('onSelect', val, extend.items)
        // }}
        >
            {(items, { open }) => {
                if (customChildRender) return <div onClick={() => setVisible(true)} style={{ fontSize: 17, width: '100%' }}>
                    {customChildRender(items, open)}
                </div>

                return (
                    <div onClick={() => setVisible(true)} style={{ fontSize: 17, width: '100%' }}>
                        {items?.every(item => item === null)
                            ? <Space align='center' justify='between' style={{ color: '#ccc', width: '100%' }}>
                                <div>请选择</div>
                                <DownOutline />
                            </Space>
                            : <Space align='center' justify='between' style={{ width: '100%' }}>
                                {items?.map(item => item?.label ?? '请选择').join('-')}
                                <CloseCircleFill style={{ color: '#ccc', fontSize: 16 }} onClick={(e) => onClear(e)} />
                            </Space>}
                    </div>
                )
            }}
        </Cascader>
    </>
}

export default CustomCascader